<template>
  <!-- :destroyOnClose="true" -->
  <a-modal
    :title="`用户产品价格`"
    :width="680"
    :visible="visible"
    @ok="
      () => {
        $emit('ok', hasChange)
      }
    "
    @cancel="
      () => {
        $emit('cancel', hasChange)
      }
    "
    :footer="false"
  >
    <a-table :dataSource="cloneList" :columns="columns" rowKey="id">
      <span slot="action" slot-scope="text, record">
        <template>
          <span v-if="record.editable">
            <a  @click="handleSave(record)">确定</a>
            <a-divider type="vertical" />
            <a @click="() => handleCancel(record)">取消</a>
          </span>
          <span v-else>
            <a @click="handleEdit(record)">编辑</a>
          </span>
          <!-- <span v-action:user_update> -->
        </template>
      </span>
      <span slot="price" slot-scope="text, record">
        <template>
          <span>
            <a-spin :spinning="record.loading" v-if="record.editable">
              <a-input
                
                style="margin: -5px 0"
                :value="text"
                @change="(e) => handleChange(e.target.value, record)"
              />
            </a-spin>
            <template v-else>
              {{ text }}
            </template>
          </span>
          <!-- <span v-action:user_update> -->
        </template>
      </span>
    </a-table>
  </a-modal>
</template>

<script>
import { mapGetters } from 'vuex'
import { userPriceUpdate } from '@/api/sms'
import cloneDeep from 'lodash.clonedeep'
// 表单字段

const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
    key: 'id',
  },
  {
    title: '产品',
    dataIndex: 'productName',
  },

  {
    title: '价格(元)',
    dataIndex: 'price',
    width: 150,
    scopedSlots: { customRender: 'price' },
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: 150,
    scopedSlots: { customRender: 'action' },
  },
]

export default {
  props: {
    visible: {
      type: Boolean,
      required: true,
    },

    list: {
      type: Array,
      default: () => null,
    },
  },
  data() {
    return {
      columns,
      uid: null,
      user: {
        fetching: false,
        timeout: null,
        list: [],
      },
      hasChange: false,
      cloneList: [],
    }
  },
  created() {
    let that = this
    // 防止表单未注册
  },
  methods: {
    handleSave(a_record) {
      const { productId, userId, price } = a_record
      let data = {
        productId,
        userId,
        price,
      }
      a_record.loading = true
      this.$forceUpdate()
      userPriceUpdate(data)
        .then((res) => {
          this.hasChange = true
          a_record.editable = false
          this.$forceUpdate()
        })
        .finally(() => {
          a_record.loading = false
        })
    },
    handleCancel(a_record) {
      a_record.editable = false
      this.$forceUpdate()
    },
    handleEdit(a_record) {
      a_record.editable = true
      this.$forceUpdate()
    },
    handleChange(a_val, a_record) {
      a_record.price = a_val
    },
  },
  computed: {
    ...mapGetters({ baseUrl: 'baseUrl' }),
  },
  watch: {
    visible: function (n, o) {
      if (n) {
        this.cloneList = cloneDeep(this.list.map((v)=>{
          v.editable = false;
          v.loading = false;
          return v
        }))
      } else {
        this.hasChange = false
      }
    },
  },
}
</script>
<style scoped lang="less">
</style>
